<template>
    <div class="mainSty">
        <div class="min_tit_sty flex_ard">
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.uploadNum }}</div>
                <div>上传总数</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.earningsSum }}</div>
                <div>收益(元)</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.browseNum }}</div>
                <div>浏览次数</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.downloadedNum }}</div>
                <div>被下载次数</div>
            </div>
        </div>
        <div class="userBox">
            <div class="setItemSty flex_btn">
                <div>账号ID</div>
                <div>{{ userInfo.id }}</div>
            </div>
            <div class="setItemSty flex_btn">
                <div>头像</div>
                <div class="flex_end bianji">
                    <img :src="userImgUrl ? userImgUrl : userImg" class="userImgSty">

                    <el-upload class="upload-demo" action="" :http-request="updateUserImg">
                        <div style="margin-left:20px;color: red;">编辑</div>
                    </el-upload>
                </div>
            </div>
            <div class="setItemSty flex_btn">
                <div>昵称</div>
                <div class="flex_end bianji">
                    <span v-show="!editData.nickname">{{ userInfo.nickname }}</span>
                    <el-input v-show="editData.nickname" v-model="userInfo.nickname" style="width: 180px;"></el-input>

                    <div style="margin-left:20px;color: red;" @click="editData.nickname = !editData.nickname"
                        v-if="!editData.nickname">编辑</div>
                    <div style="margin-left:20px;color: red;width:48px;" @click="updateUserInfo(editData.nickname)"
                        v-if="editData.nickname">保存</div>
                </div>
            </div>
            <div class="setItemSty flex_btn">
                <div>设置密码</div>
                <div class="flex_end bianji">
                    <div>******</div>
                    <div style="margin-left:20px;color: red;" @click="isShow = true">编辑</div>
                </div>
            </div>
            <div class="setItemSty flex_btn">
                <div>手机号</div>
                <div class="flex_end bianji">
                    <span v-show="!editData.phone">{{ userInfo.phone }}</span>
                    <el-input v-show="editData.phone" v-model="userInfo.phone" style="width: 180px;"></el-input>

                    <div style="margin-left:20px;color: red;" @click="editData.phone = !editData.phone"
                        v-if="!editData.phone">编辑</div>
                    <div style="margin-left:20px;color: red;width:48px;" @click="updateUserInfo(editData.phone)"
                        v-if="editData.phone">保存</div>
                </div>
            </div>
            <div class="setItemSty flex_btn">
                <div>用户类型</div>
                <el-select v-model="userType" class="m-2" placeholder="请选择用户类型" size="large"
                    @change="updateUserInfo('type')">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="setItemSty flex_btn">
                <div>微信号码</div>
                <div class="flex_end bianji">
                    <span v-show="!editData.WeChat">{{ userInfo.WeChat }}</span>
                    <el-input v-show="editData.WeChat" v-model="userInfo.WeChat" style="width: 180px;"></el-input>
                    <div style="margin-left:20px;color: red;" @click="editData.WeChat = !editData.WeChat"
                        v-if="!editData.WeChat">编辑</div>
                    <div style="margin-left:20px;color: red;width:48px;" @click="updateUserInfo(editData.WeChat)"
                        v-if="editData.WeChat">保存</div>
                </div>
            </div>
            <div class="setItemSty flex_btn">
                <div>个人简介</div>
                <div class="flex_end bianji">
                    <span v-show="!editData.jianjie" class="jianjieSty" :title="userInfo.jianjie">{{ userInfo.jianjie
                    }}</span>
                    <el-input v-show="editData.jianjie" v-model="userInfo.jianjie" class="jianjieSty"></el-input>
                    <div style="margin-left:20px;color: red;" @click="editData.jianjie = !editData.jianjie"
                        v-if="!editData.jianjie">编辑</div>
                    <div style="margin-left:20px;color: red;width:48px;" @click="updateUserInfo(editData.jianjie)"
                        v-if="editData.jianjie">保存</div>


                </div>
            </div>
        </div>
    </div>

    <el-dialog v-model="isShow" title="修改密码" height="200">
        <div class="flex_str_str">
            <div>
                <input type="password" placeholder="请输入正在使用的密码" v-model="oldPass">
            </div>
            <div style="margin: 20px 0;">
                <input type="password" v-model="newPass" placeholder="请输入新密码">
            </div>
            <div>
                <input type="password" v-model="newPass2"  placeholder="请确认新密码">
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isShow = false">取消</el-button>
                <el-button @click="updatePass()"  type="primary">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, reactive } from 'vue'
import { myStatisticsApi, updateFileApi, getUserInfoApi, updateUserInfoApi,updatePasswordApi } from '@/api/index/index'
import { ElLoading,ElMessage } from 'element-plus';
import userImg from '@/assets/img/avater.png'
const oldPass = ref('')
const newPass = ref('')
const newPass2 = ref('')
const isShow = ref<boolean>(false)
const editData = reactive<any>({
    nickname: false,
    phone: false,
    WeChat: false,
    jianjie: false
})
const userInfo = reactive<any>({
    id: '',
    nickname: '',
    phone: '',
    WeChat: '',
    jianjie: ''
})
const myUpdateNum = ref({
    browseNum: 0,
    downloadedNum: 0,
    earningsSum: 0,
    uploadNum: 0
})

const options = [
    {
        value: 1,
        label: '室内设计师',
    },
    {
        value: 2,
        label: '准备装修的业主',
    },
    {
        value: 3,
        label: '建材商家',
    },
    {
        value: 0,
        label: '其他',
    }
]
const userType = ref<number>(0)
const userImgUrl = ref<any>('')
const headImgId = ref('')
const updatePass = ()=>{
    if(newPass.value !== newPass2.value){
        ElMessage.warning('两次输入不一致')
        return
    }
    if(newPass.value == '' || newPass2.value == '' || oldPass.value == ''){
        ElMessage.warning('密码不能为空')
        return
    }
    updatePasswordApi({oldPwd:oldPass.value,newPwd:newPass.value}).then((res:any)=>{
        isShow.value = false
        ElMessage.success('修改成功!')
    })
}
const getMyStatistics = () => {
    myStatisticsApi().then((res: any) => {
        myUpdateNum.value = res.data
    })
}
const getUserInfo = () => {
    getUserInfoApi().then((res: any) => {
        userInfo.id = res.data.id
        userInfo.phone = res.data.mobile
        userInfo.nickname = res.data.nickName
        userInfo.jianjie = res.data.selfIntroduce
        userType.value = res.data.type
        userImgUrl.value = res.data.headImageUrl

    })
}
const updateUserImg = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        headImgId.value = res.data.fileId
        userImgUrl.value = 'http://106.54.190.26:8008/picture/' + res.data.filePath
        updateUserInfo('img')
    })
}
const updateUserInfo = (data?: boolean | string) => {
    let params = {}
    if (data == 'type') {
        params = {
            type: userType.value
        }
    }
    if (data == 'img') {
        params = {
            headImage: headImgId.value
        }
    }
    if (data == editData.nickname) {
        editData.nickname = false
        params = {
            nickName: userInfo.nickname
        }
    }
    if (data == editData.phone) {
        editData.phone = false
        params = {
            mobile: userInfo.phone
        }
    }
    if (data == editData.jianjie) {
        editData.jianjie = false
        params = {
            selfIntroduce: userInfo.jianjie
        }
    }
    if (data == editData.WeChat) {
        editData.WeChat = false
        return
        params = {
            mobile: userInfo.phone,
        }
    }


    updateUserInfoApi(params).then((res: any) => {
        console.log(res)
        getUserInfo()
    })
}
onMounted(() => {
    getMyStatistics()
    getUserInfo()
})
</script>
<style scoped>
:deep(.el-upload-list) {
    display: none;
}

.bianji {
    width: 600px;
}

.jianjieSty {
    width: 400px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.setItemSty {
    width: 100%;
    border-bottom: 1px solid #333;
    padding: 12px 24px;
}

.userBox {
    width: 100%;
    height: 70vh;
    background-color: #fff;
    padding: 30px 90px;
    box-sizing: border-box;
}

.userImgSty {
    height: 46px;
    border-radius: 23px;
    margin-right: 20px;
}

.mainSty {
    width: 80%;
    min-height: 100vh;
}

.min_tit_sty {
    width: 100%;
    min-height: 100px;
    background-color: #fff;
    margin-bottom: 30px;
}

.main_tab_sty {
    text-align: center;
    font-size: 18px;
    color: #A19EA8;
}

.main_tab_sty :first-child {
    color: #000;
    margin-bottom: 4px;
}
</style>


